import React, {Component} from 'react';
import '../../../static/scss/fileViewer/component/audioComponent.scss'
import commonConfig from "../../../static/js/commonConfig";
import Iconfont from "../../../utils/iconfont";
import {Slider} from "antd";
import $ from "../../../utils/jquery-vendor";

class AudioComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            fileList: []
        };
    }

    componentDidMount() {
        const {audioList} = this.props;
        this.setFileData(audioList);
    }

    componentWillUnmount() {
        this.setState = (state, callback) => {
        }
    }

    componentWillReceiveProps(nextProps, nextContext) {
        const {audioList} = nextProps;
        this.setFileData(audioList);
    }

    setFileData = (audioList) => {
        if (audioList !== this.state.fileList) {
            this.setState({fileList: audioList})
        }
    }

    /*音频加载完获取总时长*/
    onLoadedAudioData = (item, e) => {
        let {duration, currentTime} = e.target;
        item['max'] = duration;
        item['time'] = currentTime;
        item['duration'] = commonConfig.countVideoDuration(duration);
        item['currentTime'] = commonConfig.countVideoDuration(currentTime);
        this.setState({fileList: this.state.fileList});
    }
    /*播放音频*/
    playAudioHandle = (item, e) => {
        let audio = $(e.currentTarget).parents('li').find("audio");
        audio = audio[0];
        if (item.play) {
            audio.pause();
        } else {
            audio.play();
        }
    }

    /*监听音频播放*/
    onPlayAudioHandle = item => {
        item['play'] = true;
        this.setState({fileList: this.state.fileList});
    }
    /*监听音频暂停*/
    onPauseAudioHandle = item => {
        item['play'] = false;
        this.setState({fileList: this.state.fileList});
    }
    /*监听播放进度*/
    onTimeUpdateAudio = (item, e) => {
        this.onLoadedAudioData(item, e);
    }

    render() {
        const {fileList} = this.state;
        return (
            <>
                <div className="audio_component_module">
                    <ul className="clearFix">
                        {fileList.map((item, i) =>
                            <li key={i} className="float-left">
                                <div className="video_head">
                                    <audio controls={false}
                                           onLoadedData={this.onLoadedAudioData.bind(this, item)}
                                           onTimeUpdate={this.onTimeUpdateAudio.bind(this, item)}
                                           onPlay={this.onPlayAudioHandle.bind(this, item)}
                                           onPause={this.onPauseAudioHandle.bind(this, item)}>
                                        <source src={commonConfig.downloadFile(item)} type="audio/mp3"/>
                                    </audio>
                                    <span className={item.play ? 'active' : ''}
                                          onClick={this.playAudioHandle.bind(this, item)}>
                                                        <Iconfont type={item.play ? 'icon-zanting1' : 'icon-bofang'}/>
                                                    </span>
                                    <p>{item.name}</p>
                                </div>
                                <div className="video_control">
                                    <span className="currentTime">{item.currentTime || '00:00'}</span>
                                    <div className="slider_progress">
                                        <Slider max={item.max || 0} value={item.time || 0} min={0}
                                                speed={0.01} tipFormatter={null} disabled={true}/>
                                    </div>
                                    <span className="duration">{item.duration || '00:00'}</span>
                                </div>
                            </li>
                        )}
                    </ul>
                </div>
            </>
        )
    }
}

export default AudioComponent